<template>
  <div class="">
    <header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
      <a class="mui-action-back mui-icon  mui-pull-left arr_left">
      </a>
      <h1 class="mui-title"><span class="top_abv_active">商品收藏</span><span
        @tap="change_collect_type('content')">内容收藏</span></h1>
      <a class="mui-pull-right  right_icon" @tap="to_del">
        <img src="../../assets/images/my_shan.png"/>
      </a>
    </header>
    <div class="mui-content">
      <div class="collect_list">
        <div :class="is_del|is_Del" v-for="(i,index) in list">
          <div :class="is_del|is_Del_icon_show"><i :class="i.is_checked?'del_active':''" @tap="sel_del(index)"></i>
          </div>
          <div class="img fl" @tap="onderurl('/shop/goods_list/goods',i.goodsid,1)"><img :src="i.pic" alt=""></div>
          <div class="info" @tap="onderurl('/shop/goods_list/goods',i.goodsid,1)">
            <div class="title" v-html="i.name"></div>
            <div class="collect_num" v-html="i.favournum+'人收藏'"></div>
            <div class="bottom_info">
              <span class="price" style="color: #ff2626" v-html="'￥'+i.min_price"></span>
              <!--<span class="add_car_btn" v-show="!is_del" @click="add_buy_car(event,index)">加入购物车</span>-->
            </div>
          </div>
        </div>
      </div>
      <transition name="slide-fade">
        <div class="bottom" v-show="is_del">
          <!--<span @click="sel_all_del">全选</span>-->
          <button class="btn_del" @click="to_do_del">确认删除</button>
        </div>
      </transition>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'collect_goods',
    data() {
      return {
        user: '',
        list: [],
        is_del: false,
        list: [],
        select_list: ''
      };
    },
    methods: {
      //跳转
      onderurl: function (url, val, type) {
        let that = this;
        if (type == 1) {
          that.$router.push({path: url, query: {goodsid: val}});
        } else {
          that.$router.push(url);
        }
      },
      //选择
      sel_del: function (index) {
        let that = this;
        if (that.list[index].is_checked) {
          that.$set(that.list[index], 'is_checked', false)
          that.select_list.replace(that.list[index].colid + ",", "")

        } else {
          that.$set(that.list[index], 'is_checked', true)
          that.select_list += that.list[index].colid + ",";

        }
      },
      change_collect_type(type) {
        this.$store.commit("updata_collect_type", type)
      },
      //删除
      to_do_del: function () {
        let that = this;
        if (this.select_list == '' || this.select_list == null) {
          mui.toast("请选择商品");
          return false;
        } else {
          that.$axios.get("api/collect/delecoll", {params: {colid: this.select_list, type: 1}}).then(res => {
            mui.toast("删除成功");
            this.get_data()
          });
        }

      },
      to_del: function () {
        let that = this;
        that.is_del ? that.is_del = false : that.is_del = true;
      },
      get_data() {
        this.$axios.get("api/collect/collectlists", {
          params: {
            uid: this.$store.state.account.user_info.uid, type: 0
          }
        }).then(res => {
          if (res.code == 1) {
            this.list = res.data;
          }
        });
      }
    },
    created() {
      this.get_data()
    },

  }
</script>


<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/my/collect_goods.less";
  .collect_num{
    font-size: 0.6rem ;
    color: #6a6a6a;
  }
</style>
